<template>
  <div>
    
    <el-form :label-position="labelPosition" label-width="80px" :model="From">
      <el-form-item label="编号" >
      <el-input v-model="Form.id" disabled></el-input>
      </el-form-item>
      <el-form-item label="账号" >
      <el-input v-model="Form.account" disabled></el-input>
      </el-form-item>
      <el-form-item label="名称">
      <el-input v-model="Form.userName" :disabled="disabled"></el-input>
      </el-form-item>
      <el-form-item label="手机">
      <el-input v-model="Form.phone" :disabled="disabled"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-switch
          v-model="Form.gender"
          active-text="女"
          inactive-text="男" :disabled="disabled">
        </el-switch>
      </el-form-item>
      <el-form-item label="座右铭">
        <el-input
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          v-model="Form.motto" :disabled="disabled">
        </el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input placeholder="请输入密码" v-model="Form.password" show-password :disabled="disabled"></el-input>
      </el-form-item>
      <el-form-item>
      <el-button ref="update" type="primary" @click="update" id="update">修改信息</el-button>
    </el-form-item>
      
    </el-form>
  </div>
</template>


<script>
import axios from 'axios';
import api  from '/@/api.js'
import { ElMessageBox, ElMessage } from 'element-plus';
import { onMounted } from 'vue';

export default {
    data() {
      return {
        labelPosition: 'right',
        disabled: true,
        Form: {
          id: '',
          account: '',
          userName: '',
          phone: '',
          gender: true,
          motto: '',
          password: '',
        }
      };
    },
    methods:{
      loadInfo(){
        this.user = JSON.parse(window.sessionStorage.getItem("user"));
        console.log("user: " + this.user.id);
        // this.Form.id = this.user.id;
        // this.Form.account = this.user.account;
        // this.Form.userName = this.user.userName;
        // this.Form.phone = this.user.phone;
        // if(this.user.gender == "男"){
        //   this.Form.gender = true;
        // }
        // else{
        //   this.Form.gender = false;
        // }
        // this.Form.gender = this.user.gender;
        // this.Form.motto = this.user.motto;
        axios({
				method: 'get',
				url: api.commonUrl + '/user/getuserbyid',
        params: {
          id: this.user.id
        }
			}).then(response => {
				if (response.data.code == 200) {
					//console.log(response.data.data);
					//ElMessage.success(response.data.message);
          this.Form.id = response.data.data.id;
          this.Form.account = response.data.data.account;
          this.Form.userName = response.data.data.userName;
          this.Form.phone = response.data.data.phone;
          if(response.data.data.gender == "男"){
            this.Form.gender = true;
          }
          else{
            this.Form.gender = false;
          }
          this.Form.motto = response.data.data.motto;
          this.Form.password = '';
          //console.log(this.Form);
				} else {
					ElMessage.error(response.data.message);
				}
			});
      },

      update(){
        this.disabled = false;
        document.getElementById('update').innerHTML = "提交修改";
        var btn = document.getElementById('update');
        btn.onclick = this.submit;
      },
      submit(){
        if(this.Form.gender == true){
          this.Form.gender = "男";
        }
        else{
          this.Form.gender = "女";
        }
        axios({
          method: 'post',
          url: api.commonUrl + '/user/updateuser',
          data: this.Form
        }).then(function (response) {
          if (response.data.code == 200) {
            location.reload();
            ElMessage.success(response.data.message);
          } else {
            ElMessage.error(response.data.message);
          }
        });
        return false;
      }

    },
    mounted() {
      this.loadInfo();
    }
  }
</script>


<style>

</style>
